<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        placeholder="请输入歌手或歌曲"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <scroll v-show="songList" :data="songList" :pullup="pullup" @scrollToEnd="itemScrollToEnd">
     <div>
     <a class="detailNode" v-for="(song, index) in songList" :key="index">
       <div>
         <span><van-icon class="iconfont" class-prefix="my-icon" name="yinyue"></van-icon></span>
         <div class="userInfoTwo">
           <div @click="_thisSongClick(song)" style="width: 100%">
             <h2>{{song.name}}</h2>
             <p>{{song.singer+' - '+song.album}}</p>
           </div>
         </div>
       </div>
     </a>
     </div>
     </scroll>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import tabBar from '../base/tabBar'
import { Search, Icon } from 'vant'
import { search, miguSearch } from 'api/search.js'
import { createSong1, createMiguSong } from 'api/song.js'
import scroll from 'base/scroll.vue'
import { getSongVkey } from 'api/singer.js'
import { mapActions } from 'vuex'
export default {
  name: 'recommend',
  components: {
    tabBar,
    [Search.name]: Search,
    scroll,
    [Icon.name]: Icon
  },
  data () {
    return {
      value: '',
      page: 1,
      songList: [],
      pullup: true
    }
  },
  methods: {
    onSearch () {
      this.page = 1
      this.songList = []
      search(this.value, this.page).then((res) => {
        this._resetSongList(res.data)
      })
      miguSearch(this.value, this.page).then((res) => {
        this._resetMiguList(res.musics)
      })
    },
    // migu音乐数据重新整理
    _resetMiguList(list) {
      let ret = []
      // 当搜索结果为空的时候直接返回
      if (list === undefined) {
        return
      }
      list.forEach((item) => {
        let song = createMiguSong(item)
        ret.push(song)
      })
      ret.forEach((item, index) => {
        this.songList.forEach((songList) => {
          if (item.name === songList.name && item.album === songList.album) {
            ret.splice(index, 1)
          }
        })
      })
      this.songList = this.songList.concat(ret)
    },
    // qq音乐数据重新整理
    _resetSongList(list) {
      let songList = list.song.list
      var promises = []
      // 当搜索结果为空的时候直接返回
      if (list === undefined) {
        return
      }
      songList.forEach((item) => {
        promises.push(
          getSongVkey(item.songmid).then((res) => {
            let vkey = res.data.items[0].vkey
            let url = `http://dl.stream.qqmusic.qq.com/${res.data.items[0].filename}?vkey=${vkey}&guid=7175649092&uin=0&fromtag=66`
            Object.assign(item, { url })
            if (vkey !== '') {
              var song = createSong1(item)
              return song
            } else {
              return 'undefined'
            }
          }))
      })
      Promise.all(promises).then((res) => {
        var ret = []
        res.forEach((item, index) => {
          if (item !== 'undefined') {
            ret.push(item)
          }
        })
        this.songList = this.songList.concat(ret)
      })
    },
    onCancel () {
      this.songList = []
    },
    // 上拉加载
    itemScrollToEnd() {
      let page = this.page++
      search(this.value, page).then((res) => {
        this._resetSongList(res.data)
      })
      miguSearch(this.value, this.page).then((res) => {
        this._resetMiguList(res.musics)
      })
    },
    ...mapActions([
      'addSong'
    ]),
    _thisSongClick(song) {
      this.addSong({song: song})
    }
  }
}
</script>

<style scoped>
  .detailNode {
    position: relative;
    display: block;
    color: #999;
    font-size: 0;
}
.detailNode span{
    display: inline-block;
    width: 10%;
    vertical-align: middle;
    text-align: center;
    font-size: .6rem;
}
.userInfoTwo {
    position: relative;
    display: inline-block;
    width: 90%;
    border-bottom: 1px solid #eee;
    padding: .3rem 0;
    vertical-align: middle;
}
.userInfoTwo h2 {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
    color: #030303;
    font-size: .45rem;
}
.userInfoTwo p {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: inline-block;
    width: 90%;
    color: #999;
    margin-top: .2rem;
    font-size: .35rem;
}
>>>.wraper{
  height: 82%!important;
  overflow: hidden;
}
</style>
